<template>
	<view class="col ">
			<image class="top" src="/static/images/my_bg1.png" mode="aspectFill"></image>
		<view class="row-between-center" style="margin-top: -100rpx;z-index: 99;">
			<image class="icon" src="/static/images/me-setting.svg" style="margin-left: 40rpx;"></image>
			<view class="avater" @click="gousers"></view>
			<image class="icon" src="/static/images/me-notice.svg" style="margin-right: 40rpx;" @click="goNotice()"></image>
		</view>
		<view class="row-center">
			<view class="name">{{userInfo.nickName}}</view>
		</view>
		
		<view class="col-center">
			<view class="info col-center-start" style="margin-top: 20rpx;">
				<view class="row-between-center" style="margin-bottom: 45rpx;">
					<view class="col">
						<view class="balance">账户余额</view>
						<view class="balance-num">{{userInfo.balanceMoney}}</view>
					</view>
					<view class="logo">
					</view>
				</view>
				
				<view class="row-between-center" style="margin-top: 45rpx;">
					<view class="num">
						1234 5678 9012
					</view>
					
					<view class="row-center">
						<image src="/static/images/me-account.svg" class="info-logo" style="margin-right: 40rpx;" @click="goBills"></image>
						<image src="/static/images/me-in.svg" class="info-logo" @click="showInput = true"></image>
					</view>
					
				</view>
			</view>
			
			<view class="row-between-center bottom" >
				<view class="item col-center"  style="background-color: #93D2F3  ;" @click="goThree(0)">
					<image src="/static/images/me-foot.svg" class="item-icon"></image>
					<view class="item-text">足迹</view>
				</view>
				
				<view class="item col-center" style="background-color: #FFBF6B   ;" @click="goThree(1)">
					<image src="/static/images/me-collect.svg" class="item-icon"></image>
					<view class="item-text">收藏</view>
				</view>
				
				<view class="item col-center"  style="background-color: #FE794A   ;" @click="goThree(2)">
					<image src="/static/images/me-zan.svg" class="item-icon"></image>
					<view class="item-text">赞过</view>
				</view>
			</view>
		</view>
	
		
			<u-popup :show="showInput" @close="close" @open="open" mode="bottom" round="15">
		            <view class="recharge col">
						<view class="row-between-center" style="margin-top: 15rpx;">
							<image class="close" src="/static/images/bill_close.png" @click="showInput=false"></image>
							<view class="title">充值详情</view>
							<view class="close"></view>
						</view>
						<view class="row-center" style="margin-top: 50rpx;">
							<view class="select row">
								<view class="select-bg select-text" :style="index==rechareIndex?'background-color: white;':''" v-for="item,index in rechargeNum" @click="rechareIndex =index">
									{{item}}
								</view>
							</view>
						</view>
					
							<view class="row-between-center" style="margin-left: 20rpx;margin-right: 20rpx;margin-top: 56rpx;">
								<view class="row-center">
									<image src="/static/images/alipay.png" class="recharge-icon"></image>
									<view class="recharge-text">支付宝</view>
								</view>
								
								<image :src="recharge_type==0?'/static/images/radio_y_blue.png':'/static/images/radio_n_blue.png'  " class="recharge-radio" @click="recharge_type = 0"></image>
							</view>
						
						<view class="row-between-center" style="margin-left: 20rpx;margin-right: 20rpx;margin-top: 36rpx;">
							<view class="row-center">
								<image src="/static/images/wxpay.png" class="recharge-icon"></image>
								<view class="recharge-text">微信支付</view>
							</view>
							
							<image :src="recharge_type==1?'/static/images/radio_y_blue.png':'/static/images/radio_n_blue.png'" class="recharge-radio" @click="recharge_type = 1"></image>
						</view>
						
						<view class="recharge-total row-between-center">
							<view class="totla-text">
								金额<span style="margin-left: 10rpx;">¥50</span>
							</view>
							<view class=" row-center recharge-btn">
								支付
							</view>
						</view>
						
		            </view>
				</u-popup>
		
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		getInfo
	} from '@/api/change/index.js'
	export default {
		data() {
			return {
				name: this.$store.state.user.name,
				// version: getApp().globalData.config.appInfo.version,
				userInfo:{balanceMoney:0},
				showInput:false,
				rechareIndex:0,
				rechargeNum:[
					50,100,200
				],
				recharge_type:0
				
			}
		},
		computed: {},
		onLoad() {
			if(uni.getStorageSync('token')){
				this.getInfoM()
			}else{
				uni.navigateTo({
					url:'/pages/login'
				})
			}
			
		},
		methods: {
			getInfoM(){
				getInfo({
				}).then(res => {
					console.log('getInfo',res.data)
					this.userInfo = res.data
				})
			},
			goThree(type){
				uni.navigateTo({
					url:'/pages/mine/three?type='+type
				})
			},
			gousers(){
				uni.navigateTo({
					url:'/pages/mine/users'
				})
			},
			goCollect(){
				uni.navigateTo({
					url:'/pages/mine/collects'
				})
			},
			goAttend(){
				uni.navigateTo({
					url:'/pages/mine/attends'
				})
			},
			goRecord(){
				uni.navigateTo({
					url:'/pages/mine/records'
				})
			},
			goOrder(type){
				uni.navigateTo({
					url:'/pages/mine/orders?type='+type
				})
			},
			goCharge(){
				uni.navigateTo({
					url:'/pages/mine/charge'
				})
			},
			goWithdraw(){
				uni.navigateTo({
					url:'/pages/mine/withdraw'
				})
			},
			goBills(){
				uni.navigateTo({
					url:'/pages/mine/bills'
				})
			},
			goItem(){
				uni.navigateTo({
					url:'/pages/mine/records'
				})
			},
			goNotice(){
				uni.navigateTo({
					url:'/pages/mine/msg'
				})
			}
		}
	}
</script>

<style lang="scss">
	.top{
		width: 300%;
		margin-top: -100rpx;
	}
	.icon{
		width: 80rpx;
		height: 80rpx;
	}
	.avater{
		background-color: red;
		width: 200rpx;
		height: 200rpx;
		border-radius: 150rpx;
		border: 10rpx solid rgba(248, 248, 248, 1);
	}
	.name{
		margin-top: 10rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 56rpx;
		text-align: center;
	}
	.info{
		padding: 40rpx;
		width: 700rpx;
		height: 360rpx;
		border-radius: 30rpx;
		background-color: rgba(84, 188, 189, 1);
		.balance{
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
		}
		.balance-num{
			color: rgba(248, 248, 248, 1);
			font-size: 56rpx;
		}
		.num{
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
		}
		.logo{
			background-color: red;
			width: 120rpx;
			height: 120rpx;
		}
		.info-logo{
			
			width: 80rpx;
			height: 80rpx;
		}
	}
	.item{
		width: 220rpx;
		height: 400rpx;
		border-radius: 20rpx;
		background-color: rgba(254, 121, 74, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		text-align: center;
		font-family: Arial;
		border: 10rpx solid rgba(255, 255, 255, 1);
		.item-icon{
			width: 100rpx;
			height: 100rpx;
		}
		.item-text{
			margin-top: 100rpx;
			font-size: 40rpx;
			color: white;
			font-weight: bold;
		}
	}
	
	.recharge{
		border-radius: 30rpx 30rpx 0 0 ;
		padding: 15rpx 30rpx;
		background-color: white;
		height: 600rpx;
		width: 100%;
		.close{
			width: 40rpx;
			height: 40rpx;
		}
		.title{
			font-weight: bold;
			color: #000;
			font-size: 38rpx;
		}
		.select{
			border-radius: 20rpx;
			background-color: #efefef;
		}
		.select-text{
			font-size: 50rpx;
			font-weight: bold;
		}
		.select-bg{
			margin: 10rpx;
			padding: 10rpx 35rpx;
			border-radius: 20rpx;
		}
		
		.recharge-icon{
			width: 60rpx;
			height: 60rpx;
		}
		.recharge-text{
			margin-left: 30rpx;
			font-size: 38rpx;
		}
		.recharge-radio{
			width: 60rpx;
			height: 60rpx;
		}
		
		.recharge-total{
			margin-top: 60rpx;
			background-color: #000;
			border-radius: 40rpx;
			height: 80rpx;
			.totla-text{
				margin-left: 50rpx;
				font-size: 40rpx;
				color: white;
			}
			.recharge-btn{
				height: 80rpx;
				background-color:#bd3124 ;
				border-radius: 40rpx;
				width: 200rpx;
				font-size: 40rpx;
				color: white;
			}
		}
		
	}
	
	.bottom{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: calc(100% - 40rpx);
	}
</style>